<template>
	<!-- 工作台相关 -->
	<n-config-provider :theme="darkTheme">
		<div class="w100 h100 flex-col my-3dEdit">
			<div class="flex m-between s-center w100 my-3dEdit-header">
				<span class="flex-center f-s-20">
					<my-icon icon="ArrowLeftBold" class="pointer m-r-5" />
					测试场景
				</span>
				<span class="flex-center f-s-18">
					<el-space :size="15">
						<el-divider direction="vertical" />
						<el-tooltip v-for="item in btnList" :key="item.title" effect="light" :content="item.title">
							<my-icon :icon="item.icon" @click="item.fnHandle" class="pointer" />
						</el-tooltip>
					</el-space>
				</span>
			</div>
			<div class="f1 h0 flex-col relative">
				<div class="flex-center my-3dEdit-operate f-s-26">
					<el-tooltip v-for="item in operateList" :key="item.title" effect="light" :content="item.title">
						<div
							class="h100 pointer my-3dEdit-operate-btn"
							:class="{ active: item.selected() }"
							@click="item.fnHandle()"
						>
							<my-icon :icon="item.icon" />
						</div>
					</el-tooltip>
				</div>
				<!-- 左边资源库 -->
				<n-layout has-sider sider-placement="left" class="resources">
					<n-layout-sider
						collapse-mode="transform"
						:collapsed-width="0"
						:width="400"
						:native-scrollbar="false"
						show-trigger="bar"
					>
						<resources />
					</n-layout-sider>
				</n-layout>
				<!-- 三维场景 -->
				<div class="f1 h0">
					<three v-bind="{ transformControlsMode, catchPoint }" />
				</div>
			</div>
		</div>
	</n-config-provider>
</template>

<script setup>
import three from './three.vue';
import resources from './resources.vue';
import { darkTheme } from 'naive-ui';

// 操作
const btnList = [
	{
		title: '保存',
		icon: 'Finished',
		fnHandle: saveHandle
	},
	{
		title: '预览',
		icon: 'View',
		fnHandle: previewHandle
	},
	{
		title: '发布',
		icon: 'Promotion',
		fnHandle: releaseFn
	}
];
// 保存
function saveHandle() {}
// 预览
function previewHandle() {}
// 发布
function releaseFn() {
	confirm('此操作将发布站点, 是否继续?')
		.then(() => {})
		.catch(() => {
			msgInfo('已取消操作！');
		});
}

// 模型操作
const transformControlsMode = ref('translate'),
	catchPoint = ref(false),
	operateList = [
		{
			title: '移动',
			icon: 'move',
			selected: () => transformControlsMode.value === 'translate',
			fnHandle: () => (transformControlsMode.value = 'translate')
		},
		{
			title: '旋转',
			icon: 'Dxuanzhuan',
			selected: () => transformControlsMode.value === 'rotate',
			fnHandle: () => (transformControlsMode.value = 'rotate')
		},
		{
			title: '捕捉点',
			icon: 'toufang',
			selected: () => catchPoint.value,
			fnHandle: () => (catchPoint.value = !catchPoint.value)
		}
	];
</script>

<style lang="scss" scoped>
@include b('3dEdit') {
	&-header {
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		border-bottom: 1px solid var(--el-border-color);
		background-color: var(--color-bg-2);
	}
	&-operate {
		height: 40px;
		line-height: 40px;
		background-color: var(--color-bg-1);
		&-btn {
			width: 40px;
			text-align: center;
			border-radius: 4px;
			margin: 0 5px;
			transition: var(--el-transition-all);
			&:hover {
				background-color: #5a7dfd;
			}
		}
		.active {
			background-color: #0e56e1;
		}
	}
	.resources {
		position: absolute;
		top: 0;
		height: 100%;
		overflow: visible;
		:deep() {
			.n-layout-scroll-container {
				overflow: visible;
			}
		}
	}
}
</style>
